<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/indexcss">
</head>

<body>
    <div class="content">
        <!-- <span>hgfjgj</span> -->
        <div class="menu-box">
            <!-- 展示与隐藏侧边栏 开始-->
            <input type="checkbox" id="menu-btn">
            <label for="menu-btn">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jinchi"></use>
                </svg>
            </label>
            <!-- 展示与隐藏侧边栏 结束-->
            <div class="menu">
                <!-- 侧边栏的标题 开始-->
                <div class="menu-title">
                    <h2>验证码管理系统</h2>
                </div>
                <!-- 侧边栏的标题 结束-->

                <!-- 每一项导航 -->
                <div class="menu-item">
                    <input type="checkbox" id="menu-item1">
                    <label for="menu-item1">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-a-wofaqidebeifen3"></use>
                        </svg>
                        <span id="birth">生成验证码</span>
                    </label>
                </div>

                <div class="menu-item">
                    <input type="checkbox" id="menu-item1">
                    <label for="menu-item1">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yuanqucanyinbeifen"></use>
                        </svg>
                        <span id="char">字符验证码</span>
                    </label>
                </div>

                <div class="menu-item">
                    <input type="checkbox" id="menu-item2">
                    <label for="menu-item2">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-a-shuibiaochaobiaobeifen2"></use>
                        </svg>
                        <span id="equal">算式验证码</span>
                    </label>
                </div>

                <div class="menu-item">
                    <input type="checkbox" id="menu-item3">
                    <label for="menu-item3">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shuibiaochaobiaojilubeifen"></use>
                        </svg>
                        <span id="poems">诗词验证码</span>
                    </label>

                </div>

                <div class="menu-item">
                    <input type="checkbox" id="menu-item3">
                    <label for="menu-item4">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zonghenenghaobeifen"></use>
                        </svg>
                        <span id="choice">选字验证码</span>

                    </label>
                </div>

                <div class="set-line"></div>

                <div class="menu-item">
                    <label>
                        <button id="backBtn">
                            <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" version="1.1"
                                viewBox="0 0 1024 1024">
                                <path
                                    d="M874.690416 495.52477c0 11.2973-9.168824 20.466124-20.466124 20.466124l-604.773963 0 188.083679 188.083679c7.992021 7.992021 7.992021 20.947078 0 28.939099-4.001127 3.990894-9.240455 5.996574-14.46955 5.996574-5.239328 0-10.478655-1.995447-14.479783-5.996574l-223.00912-223.00912c-3.837398-3.837398-5.996574-9.046027-5.996574-14.46955 0-5.433756 2.159176-10.632151 5.996574-14.46955l223.019353-223.029586c7.992021-7.992021 20.957311-7.992021 28.949332 0 7.992021 8.002254 7.992021 20.957311 0 28.949332l-188.073446 188.073446 604.753497 0C865.521592 475.058646 874.690416 484.217237 874.690416 495.52477z">
                                </path>
                            </svg>
                            <span>退出登录</span>
                        </button>
                    </label>
                </div>
            </div>
        </div>
        <div id="main">
            <h1>生成一批不同类型的验证码</h1>
            <div id="check">
                <canvas id="cas" width="200" height="60"></canvas>
                <button id="inp">提交</button>
            </div>
            <div id="box">
                <ul id="list"></ul>
            </div>
        </div>
    </div>
</body>
<!-- 导入阿里的图标样式文件 -->
<script src="//at.alicdn.com/t/c/font_3891184_s7csbd4zg9.js"></script>
<script src="/shown"></script>
<script>
    // 获取对应的节点
    var birth = document.getElementById('birth');
    var char = document.getElementById('char');
    var equal = document.getElementById('equal');
    var poems = document.getElementById('poems');
    var choice = document.getElementById('choice');
    var backBtn = document.getElementById('backBtn');
    var h1 = document.getElementsByTagName('h1')[0];

    // 给相应内容的验证码设置标志位
    let charFlag = false;
    var equalFlag = false;
    var choiceFlag = false;
    var poemsFlag = false;
    var birthFlag = false;

    window.onload = function () {
        birth.style.color = '#a649d1'
        cas.onclick = function () {
            loadPaint();
        }
        birthFlag = true;
    }

    // 退出登录按钮
    backBtn.onclick = function () {
        window.location.href = 'http://localhost:1234/load'

    }

    // 生成验证码
    birth.onclick = function () {
        // 保证点击字母验证码时字体颜色改变
        char.style.color = 'white'
        birth.style.color = '#a649d1'
        equal.style.color = 'white'
        poems.style.color = 'white'
        choice.style.color = 'white'

        // 点击生成验证码时渲染随机类型验证码
        loadPaint();
        cas.onclick = function () {
            loadPaint();
        }
        // 在页面中显示所有的验证码
        listCode(0);
        h1.innerHTML = '生成一批不同类型的验证码'

        birthFlag = true;
        charFlag = false;
        choiceFlag = false
        poemsFlag = false
        equalFlag = false
    }
    // 字母验证码
    char.onclick = function () {
        // 保证点击字母验证码时字体颜色改变
        char.style.color = '#a649d1'
        birth.style.color = 'white'
        equal.style.color = 'white'
        poems.style.color = 'white'
        choice.style.color = 'white'

        // 点击字母验证码时只渲染字母内容验证码
        verifyPool()
        cas.onclick = function () {
            verifyPool()
        }
        // 改变页面标题
        h1.innerHTML = '生成一批字母验证码'

        // 改变相应标志,使得渲染正确
        charFlag = true;
        choiceFlag = false
        poemsFlag = false
        equalFlag = false
        birthFlag = false;

        // 在页面中显示所有字母验证码
        listCode(1);

    }
    // 算式验证码
    equal.onclick = function () {
        // 保证点击算式验证码时字体颜色改变
        char.style.color = 'white'
        birth.style.color = 'white'
        equal.style.color = '#a649d1'
        poems.style.color = 'white'
        choice.style.color = 'white'

        // 点击算式验证码时只渲染算式内容验证码
        verifyEqual()
        cas.onclick = function () {
            verifyEqual()
        }

        // 改变页面标题
        h1.innerHTML = '生成一批算式验证码'

        // 改变相应标志,使得渲染正确
        charFlag = false;
        equalFlag = true
        choiceFlag = false
        poemsFlag = false
        birthFlag = false;

        // 在页面中显示所有算式验证码
        listCode(2)
    }
    // 诗词验证码
    poems.onclick = function () {
        // 保证点击诗词验证码时字体颜色改变
        char.style.color = 'white'
        birth.style.color = 'white'
        equal.style.color = 'white'
        poems.style.color = '#a649d1'
        choice.style.color = 'white'

        // 点击诗词验证码时只渲染诗词内容验证码
        verifyPoem()
        cas.onclick = function () {
            verifyPoem()
        }

        // 改变页面标题
        h1.innerHTML = '生成一批诗词验证码'

        // 改变相应标志,使得渲染正确
        charFlag = false;
        equalFlag = false
        choiceFlag = false
        poemsFlag = true

        // 在页面中显示所有诗词验证码
        listCode(3)
    }
    // 选词验证码
    choice.onclick = function () {
        // 保证点击选词验证码时字体颜色改变
        char.style.color = 'white'
        birth.style.color = 'white'
        equal.style.color = 'white'
        poems.style.color = 'white'
        choice.style.color = '#a649d1'

        // 点击选词验证码时只渲染字母内容验证码
        verifyCharacter()
        cas.onclick = function () {
            verifyCharacter()
        }

        // 改变页面标题
        h1.innerHTML = '生成一批选词验证码'

        // 改变相应标志,使得渲染正确
        charFlag = false;
        equalFlag = false
        choiceFlag = true
        poemsFlag = false
        birthFlag = false;


        // 在页面中显示所有选词验证码
        listCode(4)
    }

    // 向arr中添加验证码对象
    function pushObj() {
        const obj = {};
        let src = cas.toDataURL();
        obj.name = '图片' + new Date().getTime();
        obj.answer = str;
        obj.src = src;
        arr.push(obj);
    }


    // 传向后端数据所需要的中间变量
    var arr = [];//保存生成的验证码图片的数据
    var brr = [];//使提交给后端的是最新的验证码
    // 提交一批验证码，并展示
    inp.onclick = function () {
        // 保证验证码内容的随机性
        if (charFlag) {
            for (var n = 0; n < 10; n++) {
                verifyPool();
                pushObj()
            }
        } else if (equalFlag) {
            for (var n = 0; n < 10; n++) {
                verifyEqual();
                pushObj()
            }
        } else if (poemsFlag) {
            for (var n = 0; n < 10; n++) {
                verifyPoem();
                pushObj()
            }
        } else if (choiceFlag) {
            for (var n = 0; n < 10; n++) {
                verifyCharacter();
                pushObj()
            }
        } else if (birthFlag) {
            for (var n = 0; n < 10; n++) {
                const obj = {};
                if (n == 0 || n == 3 || n == 7) {
                    verifyCharacter()
                } else if (n == 2 || n == 5 || n == 8) {
                    verifyPool()
                } else if (n == 6 || n == 9) {
                    verifyPoem()
                } else {
                    verifyEqual()
                }
                pushObj()
            }
        }
        // console.log(arr)
        for (var i = 0; i < arr.length; i++) {
            var file = dataURLtoFile(arr[i].src, arr[i].name)
            console.log(file)
            file.answer = arr[i].answer
            console.log(file)
            brr.unshift(file)
        }
        console.log(brr)
        arr = [];

        // 提交生成的验证码图片
        const formData = new FormData();
        for (var j = 0; j < 10; j++) {
            formData.append('image', brr[j])
            formData.append('answer', brr[j].answer)
            // console.log(brr[j])
        }

        fetch('/admin/image', {
            method: 'post',
            body: formData,
        })
            .then(res => {
                // 获取上传的一批验证码的数据
                if (charFlag) {
                    listCode(1);
                } else if (equalFlag) {
                    listCode(2);

                } else if (poemsFlag) {
                    listCode(3);

                } else if (choiceFlag) {
                    listCode(4);

                } else if (birthFlag) {
                    listCode(0);
                }
            })

    }
</script>

</html>